<template>
  <el-dialog 
    :model-value="visible" 
    title="学员列表" 
    width="70%" 
    destroy-on-close
    @update:model-value="$emit('update:visible', $event)"
  >
    <el-table :data="students" v-loading="loading" max-height="400">
      <el-table-column prop="studentId" label="学号" width="120" />
      <el-table-column prop="name" label="姓名" width="100" />
      <el-table-column prop="majorName" label="专业" width="120" />
      <el-table-column prop="className" label="队次" width="100" />
      <el-table-column label="总成绩" width="80">
        <template #default="scope">
          <span v-if="scope.row.finalScore !== null && scope.row.finalScore !== undefined">
            {{ scope.row.finalScore }}
          </span>
          <span v-else class="text-gray-400">未录入</span>
        </template>
      </el-table-column>
      <el-table-column label="成绩状态" width="100">
        <template #default="scope">
          <el-tag :type="scope.row.finalScore ? 'success' : 'info'" size="small">
            {{ scope.row.finalScore ? '已录入' : '未录入' }}
          </el-tag>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script>
export default {
  name: 'TeachingMissionStudentsDialog',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    students: {
      type: Array,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  emits: ['update:visible']
}
</script>

<style scoped>
.text-gray-400 {
  color: #9ca3af;
}
</style>
